// 实现函数的方式去使用xtx-message组件的提示信息
import XtxMessage from './xtx-message.vue'
import {
    createVNode,
    render
} from 'vue'
import {
    setTimeout
} from 'core-js'
// 创建真实的dom
const div = document.createElement('div')
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
    // 定时器标识
let timer = null

export default ({
    type,
    text,
    time = 3000
}) => {
    // 1. 导入组件
    // 2. 根据组件创建虚拟节点
    const vnode = createVNode(XtxMessage, {
        type,
        text
    })

    // 3. 准备一个DOM容器
    // 4. 把虚拟节点渲染DOM容器中
    render(vnode, div)

    // 5. 开启定时，移出DOM容器内容
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        render(null, div)
    }, time)
}